<template>
  <div class="search">
    <div class="search-a">
      <div
        class="search-sila">
        <img
          src="../../assets/search/search.png"
          alt="加载错误"
          class="img-s">
        <div class="long">
        </div>
        <input class="b" v-model="name" />
        <!-- <b class="b">华润</b> -->
        <img
          src="../../assets/search/Group 6.png"
          alt="加载错误"
          class="img-x">
      </div>
      <b class="dis">取消</b>
    </div>
    <ul
      class="classification">
      <li
        class="classification-a"
        style="color:#FC1541">
        <b>全部</b>
        <div
          class="Underscore">
        </div>
      </li>
      <li
        class="classification-b">
      </li>
      <li style="width: 24px;"
        class="classification-a">
        人
      </li>
      <li
        class="classification-b">
      </li>
      <li
        class="classification-a">
        车辆</li>
      <li
        class="classification-b">
      </li>
      <li
        style="border-right:none"
        class="classification-a">
        项目</li>
    </ul>
    <div class="history">
      <p>历史搜索</p>
      <table>
        <tr>
          <td>华润</td>
          <td>工业园</td>
          <td>李刘玲</td>
          <td>苹果</td>
        </tr>
        <tr>
          <td>罗伟</td>
          <td>钩机</td>
          <td>散工</td>
          <td>日期</td>
        </tr>
      </table>
      <hr>
      <div>清除搜索历史</div>
    </div>
  </div>

</template>

<script>
export default {
  name: 'maintain',
  data(){
    return {
      name:'华润',
    }
  }
}
</script>

<style lang="scss" scoped>
.search {
  margin-top: 2%;
  width: 100%;
  height: 100vh;
  background-color: #FFFFFF;
  .search-a {
    position: relative;
    background-color: #fafbfd;
    .search-sila {
      width: 75vw;
      height: 30px;
      border: 1.5pt #fc1541 solid;
      border-radius: 0.571429rem;
      margin-left: 5%;
      position: relative;

      .img-s {
        position: absolute;
        top: 27%;
        left: 0.285714rem;
      }
      .img-x {
        position: absolute;
        top: 30%;
        left: 6.857143rem;
        opacity: 0.7;
      }
      .b {
        font-family: 苹方;
        font-size: 1.3em;
        position: absolute;
        top: 17%;
        left: 1.285714rem;
      }
      .long {
        width: 0.028571rem;
        height: 0.371429rem;
        border-right: 0.028571rem #c6c6c6 solid;
        position: absolute;
        top: 0.228571rem;
        left: 1rem;
      }
    }
    .dis {
      font-family: 苹方;
      font-size: 1.3em;
      color: #fc1541;
      position: absolute;
      top: 0.2rem;
      right: 5.66%;
    }
  }
  .classification {
    background-color: #fafbfd;
    .classification-a {
      font-family: 苹方;
      font-size: 1.3em;
      color: #dcdcdc;
      display: inline-block;
      padding: 3.73% 8.4% 3.73% 8.4%;
    }
    .classification-b {
      height: 0.342857rem;
      display: inline-block;
      border-right: 0.028571rem #dcdcdc solid;
    }
    .Underscore {
      width: 0.285714rem;
      height: 0.028571rem;
      border-bottom: 0.057143rem #fc1541 solid;
      border-radius: 0.028571rem;
      margin: 0 auto;
    }
  }
  .history {
    p {
      font-family: 苹方;
      font-size: 1.4em;
      color: #898989;
      padding-left: 4%;
      margin-top: 4%;
    }
    table {
      margin: 0 auto;
    }
    td {
      font-family: 苹方;
      font-size: 1.3em;
      color: #898989;
      width: 20%;
      height: 8%;
      background-color: #f9f9f9;
      padding: 0.142857rem;
      text-align: center;
      border: 0.428571rem #fff solid;
    }
    tr {
      border-bottom: 0.285714rem #fff solid;
    }
    hr {
      width: 90%;
      height: 0.028571rem;
      background-color: #f2f2f2;
      border-radius: 0.028571rem;
      border: none;
    }
    div {
      font-family: 苹方;
      font-size: 1.2em;
      width: 30%;
      margin: 0 auto;
      color: #f5a623;
    }
  }
}
</style>
